<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0">
    <title>订单 - 三角洲行动代练</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body { background-color: #f0f2f5; }
        .phone-frame {
            width: 375px;
            height: 812px;
            background: #000;
            border-radius: 40px;
            padding: 12px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
        }
        .phone-screen {
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 32px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .tab-bar {
            display: flex;
            align-items: center;
            justify-content: space-around;
            background: #fff;
            border-bottom: 1px solid #f3f4f6;
            position: relative;
        }
        .tab-bar .tab {
            flex: 1;
            text-align: center;
            padding: 14px 0 10px 0;
            font-size: 16px;
            font-weight: 500;
            color: #6B7280;
            cursor: pointer;
            position: relative;
            transition: color 0.2s;
        }
        .tab-bar .tab.active {
            color: #2563eb;
        }
        .tab-bar .slider {
            position: absolute;
            bottom: 0;
            height: 2.5px;
            background: #2563eb;
            border-radius: 2px;
            transition: left 0.2s, width 0.2s;
        }
        .sub-tab-bar {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background: #fff;
            border-bottom: 1px solid #f3f4f6;
            overflow-x: auto;
            padding-left: 8px;
            -ms-overflow-style: none;  /* IE和Edge */
            scrollbar-width: none;     /* Firefox */
        }
        .sub-tab-bar::-webkit-scrollbar {
            display: none;             /* Chrome/Safari/Opera */
        }
        .sub-tab {
            flex: none;
            margin-right: 16px;
            padding: 10px 0;
            font-size: 15px;
            color: #6B7280;
            cursor: pointer;
            position: relative;
            transition: color 0.2s;
        }
        .sub-tab.active {
            color: #2563eb;
            font-weight: bold;
        }
        .order-list-area {
            flex: 1;
            overflow-y: auto;
            background: #f8fafc;
            padding: 0 0 80px 0;
            -ms-overflow-style: none;  /* IE和Edge */
            scrollbar-width: none;     /* Firefox */
        }
        .order-list-area::-webkit-scrollbar {
            display: none;             /* Chrome/Safari/Opera */
        }
        .order-list-area::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        .order-list-area::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 2px;
        }
        .order-card {
            background: #fff;
            border-radius: 8px;
            padding: 8px 10px;
            margin: 8px 8px 0 8px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            border: 1px solid #f0f0f0;
            position: relative;
            cursor: pointer;
            transition: box-shadow 0.2s, transform 0.1s;
        }
        .order-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        }
        .order-status-badge {
            position: absolute;
            top: 8px;
            right: 10px;
            z-index: 2;
            padding: 1px 6px;
            font-size: 11px;
            font-weight: bold;
            border-radius: 999px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            background: #f3f4f6;
            color: #2563eb;
            pointer-events: none;
        }
        .status-wait { background: #f3f4f6; color: #2563eb; }
        .status-doing { background: #eff6ff; color: #2563eb; }
        .status-confirm { background: #fef9c3; color: #f59e42; }
        .status-done { background: #dcfce7; color: #22c55e; }
        .status-cancel { background: #f3f4f6; color: #9ca3af; }
        .status-appeal { background: #fee2e2; color: #ef4444; }
        .order-title {
            font-size: 14px;
            font-weight: 500;
            color: #1F2937;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid #f5f5f5;
            padding-right: 80px;
        }
        .order-type-tag {
            padding: 1px 6px;
            background: #EFF6FF;
            border-radius: 3px;
            font-size: 11px;
            color: #3B82F6;
            margin-right: 6px;
        }
        .order-info {
            font-size: 12px;
            color: #6B7280;
            margin-top: 4px;
            display: flex;
            align-items: center;
        }
        .order-info:not(:last-child) {
            margin-bottom: 2px;
        }
        .order-info-separator {
            margin: 0 6px;
            color: #E5E7EB;
        }
        .order-tags {
            display: flex;
            gap: 4px;
            margin-top: 6px;
            flex-wrap: wrap;
        }
        .order-tag {
            padding: 1px 6px;
            background: #F9FAFB;
            border-radius: 3px;
            font-size: 11px;
            color: #6B7280;
        }
        .order-type-tag.rank { background: #eff6ff; color: #2563eb; }
        .order-type-tag.practice { background: #f0fdf4; color: #22c55e; }
        .order-type-tag.other { background: #f3f4f6; color: #6b7280; }
        .order-price {
            font-size: 18px;
            font-weight: bold;
            color: #EF4444;
            text-align: right;
            margin-left: 8px;
            white-space: nowrap;
        }
        .empty-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 320px;
            color: #9ca3af;
        }
        .empty-area svg {
            width: 80px;
            height: 80px;
            margin-bottom: 16px;
        }
        .bottom-nav {
            height: 64px;
            background: white;
            border-top: 1px solid #e5e7eb;
            margin: 0 12px;
            border-radius: 0 0 32px 32px;
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen">
    <div class="phone-frame">
        <div class="phone-screen flex flex-col py-0">
            <!-- 状态栏 -->
            <div class="flex items-center justify-between h-7 px-4 bg-white select-none">
                <span class="text-xs font-medium text-black tracking-widest">10:50</span>
                <div class="flex items-center space-x-1">
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.5 3.5L4 6m13.5-2.5L20 6M12 8v4l3 3m-3 7a8 8 0 100-16 8 8 0 000 16z"/></svg>
                    <span class="text-[10px] font-bold text-black">5.00</span>
                    <span class="text-[10px] text-black">KB/S</span>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.05 7.05A16 16 0 0112 3c2.5 0 4.89.58 7.05 1.64M5.07 10.07A11 11 0 0112 7c2.21 0 4.3.6 6.07 1.64M8.11 13.11A6 6 0 0112 11a6 6 0 013.89 2.11M12 17h.01"/></svg>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h.01M7 16v4m5-8v12m5-16v16"/></svg>
                    <span class="text-xs font-bold text-black ml-0.5">5G</span>
                    <div class="flex items-center ml-1">
                        <div class="w-6 h-3 rounded-sm border border-black flex items-center relative">
                            <div class="bg-black h-2 rounded-l-sm" style="width:70%"></div>
                        </div>
                        <span class="text-xs font-bold text-black ml-1">78</span>
                    </div>
                </div>
            </div>
            <!-- 标题栏 -->
            <div class="flex items-center h-12 bg-white select-none border-b border-gray-100 px-4 relative">
                <div class="absolute left-0 right-0 flex justify-center items-center pointer-events-none">
                    <span class="text-base font-medium text-black tracking-wide leading-none">订单</span>
                </div>
                <div class="flex-shrink-0 flex items-center ml-auto z-10" style="min-width:90px;">
                    <div class="flex items-center bg-white rounded-full border border-gray-200 px-3 py-1 shadow-sm" style="height:36px;">
                        <span class="text-black text-lg font-bold px-1">···</span>
                        <div class="w-px h-5 bg-gray-200 mx-2"></div>
                        <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center cursor-pointer" title="退出">
                            <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 一级TabBar -->
            <div class="tab-bar" id="main-tab-bar">
                <div class="tab active" data-tab="send">我发的单</div>
                <div class="tab" data-tab="receive">我接的单</div>
                <div class="slider" id="main-tab-slider" style="left:0;width:50%"></div>
            </div>
            <!-- 二级TabBar -->
            <div class="sub-tab-bar relative" id="sub-tab-bar">
                <!-- JS渲染 -->
            </div>
            <!-- 订单列表区 -->
            <div class="order-list-area" id="order-list-area">
                <!-- JS渲染订单卡片或空状态 -->
            </div>
            <!-- 底部导航栏 -->
            <div class="bottom-nav flex items-center justify-around">
                <button class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-plus-circle text-xl"></i>
                    <span class="text-xs mt-1">发单</span>
                </button>
                <button class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-handshake text-xl"></i>
                    <span class="text-xs mt-1">接单</span>
                </button>
                <button class="flex flex-col items-center text-blue-500">
                    <i class="fas fa-clipboard-list text-xl"></i>
                    <span class="text-xs mt-1">订单</span>
                </button>
                <button class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </button>
            </div>
        </div>
    </div>
    <script>
    // 一级、二级Tab配置
    const subTabs = {
        send: ["全部", "待接单", "进行中", "待确认", "已完成", "待取消", "已取消"],
        receive: ["全部", "进行中", "待确认", "已完成", "待取消", "已取消"]
    };
    // 示例订单数据（结构与接单页一致，增加段位、时限、保证金字段）
    const orders = {
        send: [
            {id:1, type:'rank', typeText:'排位', title:'代练青铜到黄金，要求24小时内完成', server:'安卓-QQ - 默认服', rank:'青铜Ⅲ → 黄金Ⅰ', time:'2024-06-01', limit:'24小时', deposit:'¥50.0', price:100, status:'待接单'},
            {id:2, type:'practice', typeText:'陪练', title:'陪练上分，要求12小时内完成', server:'苹果-QQ - 默认服', rank:'', time:'2024-06-02', limit:'12小时', deposit:'¥50.0', price:80, status:'进行中'},
            {id:3, type:'other', typeText:'其他', title:'代练任务，要求48小时内完成', server:'安卓-QQ - 默认服', rank:'', time:'2024-06-03', limit:'48小时', deposit:'¥100.0', price:200, status:'已完成'},
            {id:4, type:'rank', typeText:'排位', title:'代练白银到铂金，要求36小时内完成', server:'安卓-微信 - 默认服', rank:'白银Ⅱ → 铂金Ⅳ', time:'2024-06-04', limit:'36小时', deposit:'¥80.0', price:150, status:'待确认'},
            {id:5, type:'rank', typeText:'排位', title:'代练黄金到铂金，要求12小时内完成', server:'安卓-QQ - 默认服', rank:'黄金Ⅱ → 铂金Ⅳ', time:'2024-06-05', limit:'12小时', deposit:'¥60.0', price:120, status:'已取消'},
            {id:6, type:'practice', typeText:'陪练', title:'陪练上分，要求24小时内完成', server:'安卓-QQ - 默认服', rank:'', time:'2024-06-06', limit:'24小时', deposit:'¥50.0', price:100, status:'申诉中'}
        ],
        receive: [
            {id:11, type:'rank', typeText:'排位', title:'代练青铜到黄金，要求24小时内完成', server:'安卓-QQ - 默认服', rank:'青铜Ⅲ → 黄金Ⅰ', time:'2024-06-01', limit:'24小时', deposit:'¥50.0', price:100, status:'进行中'},
            {id:12, type:'practice', typeText:'陪练', title:'陪练上分，要求12小时内完成', server:'苹果-QQ - 默认服', rank:'', time:'2024-06-02', limit:'12小时', deposit:'¥30.0', price:80, status:'待确认'},
            {id:13, type:'other', typeText:'其他', title:'代练任务，要求48小时内完成', server:'安卓-QQ - 默认服', rank:'', time:'2024-06-03', limit:'48小时', deposit:'¥100.0', price:200, status:'已完成'},
            {id:14, type:'rank', typeText:'排位', title:'代练白银到铂金，要求36小时内完成', server:'安卓-微信 - 默认服', rank:'白银Ⅱ → 铂金Ⅳ', time:'2024-06-04', limit:'36小时', deposit:'¥80.0', price:150, status:'申诉中'},
            {id:15, type:'rank', typeText:'排位', title:'代练黄金到铂金，要求12小时内完成', server:'安卓-QQ - 默认服', rank:'黄金Ⅱ → 铂金Ⅳ', time:'2024-06-05', limit:'12小时', deposit:'¥60.0', price:120, status:'已取消'}
        ]
    };
    // 状态与样式映射
    const statusMap = {
        '待接单': {cls:'status-wait'},
        '进行中': {cls:'status-doing'},
        '待确认': {cls:'status-confirm'},
        '已完成': {cls:'status-done'},
        '已取消': {cls:'status-cancel'},
        '申诉中': {cls:'status-appeal'}
    };
    // 类型与样式映射
    const typeMap = {
        'rank': 'order-type-tag rank',
        'practice': 'order-type-tag practice',
        'other': 'order-type-tag other'
    };
    // Tab切换逻辑
    let mainTab = 'send';
    let subTab = '全部';
    function renderSubTabBar() {
        const bar = document.getElementById('sub-tab-bar');
        bar.innerHTML = '';
        const tabs = subTabs[mainTab];
        tabs.forEach(tab => {
            const div = document.createElement('div');
            div.className = 'sub-tab' + (tab === subTab ? ' active' : '');
            div.innerText = tab;
            div.onclick = () => { subTab = tab; renderSubTabBar(); renderOrderList(); };
            bar.appendChild(div);
        });
    }
    function renderOrderList() {
        const area = document.getElementById('order-list-area');
        let list = orders[mainTab];
        if(subTab !== '全部') list = list.filter(o => o.status === subTab);
        if(list.length === 0) {
            area.innerHTML = `<div class='empty-area'>
                <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7V6a3 3 0 013-3h12a3 3 0 013 3v1M3 7v11a3 3 0 003 3h12a3 3 0 003-3V7M3 7h18"/></svg>
                <div class='mt-2 text-base'>暂无订单，快去发单/接单吧！</div>
            </div>`;
            return;
        }
        area.innerHTML = '';
        list.forEach(o => {
            // 不渲染已被抢订单
            if(o.status === '已被抢') return;
            let typeTagClass = 'order-type-tag';
            if(o.type === 'rank') typeTagClass += ' rank';
            else if(o.type === 'practice') typeTagClass += ' practice';
            else if(o.type === 'other') typeTagClass += ' other';
            const card = document.createElement('div');
            card.className = 'order-card';
            card.onclick = () => { window.location.href = 'order-detail.html?id=' + o.id; };
            card.innerHTML = `
                <span class="order-status-badge ${statusMap[o.status].cls}">${o.status}</span>
                <div class="order-title">
                    <span class="${typeTagClass}">${o.typeText}</span>${o.title}
                </div>
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <div class="order-info">
                            <span>${o.server}</span>
                            ${o.rank ? '<span class=\"order-info-separator\">|</span><span>' + o.rank + '</span>' : ''}
                        </div>
                        <div class="order-info">
                            <span>代练时限：${o.limit}</span>
                            <span class="order-info-separator">|</span>
                            <span>保证金：${o.deposit}</span>
                        </div>
                    </div>
                    <div class="order-price">¥${o.price}.0</div>
                </div>
            `;
            area.appendChild(card);
        });
    }
    // 一级Tab切换
    document.querySelectorAll('#main-tab-bar .tab').forEach((tab, idx) => {
        tab.onclick = function() {
            document.querySelectorAll('#main-tab-bar .tab').forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            mainTab = this.dataset.tab;
            subTab = '全部';
            // 滑块动画
            const slider = document.getElementById('main-tab-slider');
            slider.style.left = (idx*50) + '%';
            slider.style.width = '50%';
            renderSubTabBar();
            renderOrderList();
        };
    });
    // 初始化
    renderSubTabBar();
    renderOrderList();
    </script>
</body>
</html> 